<template>
    <div class='user_info_box'>
        <div class="header">
            <div class="head_pic iconfont" :class='{"icon-user":!name}'>
                <img v-show='pic' :src="pic" alt="">
            </div>
            <div class="user_name_box" @click='toLogin'>
                {{name ? name : "请登录"}}
            </div>
        </div>
        <van-cell title="我的订单" is-link  icon="shop-o" @click='toOrder'/>

        <van-grid>
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
        </van-grid>

        <van-cell-group>
            <van-cell title="单元格" value="内容" />
            <van-cell is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <!-- v-slot:title -->
                    <span class='iconfont icon-user'></span>
                    <span class="custom-title">单元格</span>
                </template>
            </van-cell>
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" />
        </van-cell-group>

        
        <van-button v-if='name' type="warning" @click='signout'>退出登录</van-button>
    </div>
</template>
<script>
// @ is an alias to /src
import {signout} from '@/api/api'
export default {
    name: 'user',
    data() {
        return {
        
        }
    },
    methods: {
        toOrder(){
            this.$router.push('/order')
        },
        toLogin(){
            if(this.name)return;
            this.$router.push('/login')
        },
        signout(){
            signout().then(()=>{
                // 退出成功 清空 vuex
                this.$store.commit('changeUserInfo',{})
            })
        }
    },
    computed: {
      name(){return this.$store.state.userInfo.name},
    //   name2(){return this.$store.getters.name},
      pic(){return this.$store.state.userInfo.pic}
    },
    components: {
        
    }
}
</script>
<style lang="less">
.user_info_box{
    text-align: left;
    .header{
        height: 100px;
        display: flex;
        width: 100%;
        background: rgb(164, 82, 6);
        align-items: center;
        .head_pic{
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border: 1px solid #eee;
            margin: 0 20px;
            overflow: hidden;
            border-radius: 50%;
            font-size: 30px;
            color:#eee;
            img{
                width:100%;
                height: 100%;
            }
        }
        .user_name_box{
            flex:auto;
            color:#eee;
        }
    }
}
</style>